<template>
  <view class="conter">
    <!-- 已购买课程显示 -->
    <view class="purchase" v-if="isDidntbuy == 0">
      <!-- 选项卡 -->
      <!-- 主题内容 -->
      <view class="main">
        <view class="creater-time">{{ dateWeek }}</view>
        <view class="curriculum">
          <view 
            class="item-curriList" 
            v-for="(item,index) in dataCulum" 
            :key="index" 
            @click="courseClick(item.seriesId,item.courseId )"
          >
            <view class="img-title">
              <view class="conter-img">
                <image class="img" mode="aspectFill" :src="item.courseImageUrl"></image>
              </view>
              <view class="right-name-text">
                <view class="right-title">{{ item.titleName }}</view>
                <view class="right-subTitle">{{ item.courseName }}</view>
              </view>
            </view>
            <view class="right-rate-time">
              <htz-rate v-model="item.star" :size="35" :count="3" :readonly='true'></htz-rate>
              <view class="time">{{ item.startTime }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 未购买课程 -->
    <view class="Didntbuy" v-if="isDidntbuy == 1">
      <view class="dint-img">
        <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/course/nodata.png"></image>
      </view>
      <view class="didnt-name">暂无学习课程</view>
      <view class="dredge">去开通课程</view>
    </view>
    <!-- 购买了没上课 -->
    <view class="no-attend" v-if="isDidntbuy == 2">
      <view class="dint-img">
        <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/course/Group%20180.png"></image>
      </view>
      <view class="hint-title">火星系列体验课以开通</view>
      <view class="didnt-name">完成课程可查看学习报告</view>
      <view class="dredge">去上课 </view>
    </view>
    <binding ref="didntbuy"></binding>
  </view>
</template>

<script>
  import htzRate from '@/components/htz-rate/htz-rate.vue'
  import binding from '@/components/loding/binding.vue'
  import { courseList } from '@/utils/api.js' // 接口api
  import { getDateWeek,dateDiff } from '@/utils/date.js'
  export default {
    components: { htzRate, binding },
  	data() {
  		return {
        dateWeek:'',
        fromData: { // 列表参数
          seriesld: 0, // 选项卡id
          pageIndex: 1, // 当前页
          pageSize: 10 // 一页20条数据
        },
        isDidntbuy: 0 ,
        dataCulum: [], // 列表数据
        tebActive: 0, // 顶部选项卡下表
        tabList: [{id: 1, title: "火星系列"}, {id: 2, title: '三体系列'}],
  			statuHeight: uni.getSystemInfoSync().statusBarHeight // 状态栏高度
  		}
  	},
    onLoad() {
      this.getCourseList() // 获取课程表方法
    },
    methods: {
      // 获取列表接口
      async getCourseList() {
        const vm = this
        const res = await courseList(this.fromData)
        if(res.code === 0) {
          vm.dataCulum = res.result.reportDto
          vm.dateWeek = dateDiff(res.result.reportDto[0].buyDateTime)
          vm.dataCulum.forEach(item => {
            console.log("开课时间:",item.createDateTime)
            item.startTime = getDateWeek(item.createDateTime,true)
          })
        }
      },
      // 跳详情页
      courseClick(seriesId,courseId) {
        uni.navigateTo({
          url: '/pages/my/study/study_detail?seriesId='+seriesId + '&courseId=' + courseId
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .conter{
    background: #f8f8f8;
    height: 100vh;
    .hrader{
      padding: 20rpx 40rpx 0 40rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #262626 ;
    }
    .main{
      padding: 34rpx 0;
      .creater-time{
        width: 104rpx;
        height: 40rpx;
        border-radius: 20rpx;
        background: #F0F0F0;
        font-size: 24rpx;
        color: #8c8c8c;
        line-height: 40rpx;
        text-align: center;
        margin: 0 0 16rpx 40rpx;
      }
      .curriculum{
        width: 670rpx;
        // height: 200rpx;
        background: #FFFFFF;
        box-shadow: 0px 8rpx 32rpx rgba(0, 0, 0, 0.06);
        border-radius: 40rpx;
        padding: 32rpx 32rpx 0 32rpx;
        margin: auto;
        .item-curriList{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 32rpx;
          .img-title{
            display: flex;
            align-items: center;
            .conter-img{
              width: 128rpx;
              height: 128rpx;
              border-radius: 20rpx;
              .img{
                 border-radius: 20rpx;
              }
            }
            .right-name-text{
              margin-left: 16rpx;
              .right-title{
                color: #8C8C8C;
                font-size: 24rpx;
                margin-bottom: 45rpx;
              }
              .right-subTitle{
                color: #262626;
                font-size: 28rpx;
              }
            }
          }
          .right-rate-time{
            text-align: right;
            .time{
              font-size: 20rpx;
              color: #8c8c8c;
              margin-top: 45rpx;
            }
          }
        }
      }
    }
    // 未购买样式
    .Didntbuy{
      height: 100vh;
      padding-top: 128rpx;
      image{
        width: 100%;
        height: 100%;
      }
      background: #FFFFFF;
      .dint-img{
        width: 320rpx;
        height: 320rpx;
        margin: auto;
      }
      .didnt-name{
        font-size: 28rpx;
        margin: 42rpx 0 16rpx 0;
        text-align: center;
      }
      .dredge{
        width: 464rpx;
        height: 72rpx;
        background: #FF800C;
        border-radius: 36rpx;
        font-size: 32rpx;
        letter-spacing: 0.2em;
        color: #FFFFFF;
        text-align: center;
        line-height: 72rpx;
        margin: auto;
      }
    }
    // 购买了没上课
    .no-attend{
      height: 100vh;
      padding-top: 128rpx;
      color: #262626;
      background: #FFFFFF ;
      .dint-img{
        width: 320rpx;
        height: 320rpx;
        margin: auto;
      }
      .hint-title{
        font-size: 20rpx;
        text-align: center;
        margin: 14rpx 0 12rpx 0;
      }
      .didnt-name{
        font-size: 24rpx;
        margin: 0rpx 0 16rpx 0;
        text-align: center;
      }
      .dredge{
       width: 464rpx;
       height: 72rpx;
       background: #FF800C;
       border-radius: 36rpx;
       font-size: 32rpx;
       letter-spacing: 0.2em;
       color: #FFFFFF;
       text-align: center;
       line-height: 72rpx;
       margin: auto;
      }
    }
  }
</style>

